<template>
  <demo-content :title="title">
    <p>
      Canvas 绘制环境对象的一个关键功能是可以对绘图表面自身进行保持与恢复。
      这种绘图表面的保存与恢复功能，可以让开发者在绘图表面上进行一些临时性的绘制动作，诸如绘制橡皮带线条、辅助线(guidewire)
      或注解(annotation)。这些绘制对许多工作而言是很有用的。
    </p>
    <p>
      下面的例子用于绘制矩形，点击 canvas
      后拖动即可开始创建矩形，松开鼠标即可完成矩形创建。
    </p>
    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  type Point,
  drawMosaic,
  DrawingSurfaceHelper,
  rect,
  clientPosCvt,
} from "./utils";

const title = "绘图表面保存/恢复";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();

onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d", {
    // 如果需要多次调用 ctx 的 getImageData，最好加上下面的参数，系统会做优化
    willReadFrequently: true,
  })!;
  const dsHelper = DrawingSurfaceHelper.create(ctx);
  let startPoint: Point | null = null;
  drawMosaic(ctx, { w: 30 });
  canvas.onmousedown = (e) => {
    dsHelper.takeSnapshot();
    startPoint = clientPosCvt(ctx, e);
  };
  canvas.onmousemove = (e) => {
    if (!startPoint) return;
    dsHelper.restoreSnapshot();
    const { x: x0, y: y0 } = startPoint;
    const { x: x1, y: y1 } = clientPosCvt(ctx, e);
    rect.draw(ctx, {
      x: x0,
      y: y0,
      w: x1 - x0,
      h: y1 - y0,
      strokeStyle: "#00bfff",
    });
  };
  canvas.onmouseup = () => (startPoint = null);
});
</script>

<style src="./default.css" scoped></style>
